<template>
  <div class="analytics-management">
    <div class="page-header">
      <h2>数据分析管理</h2>
    </div>
    
    <!-- 数据上传 -->
    <el-card shadow="hover" class="upload-card">
      <template #header>
        <div class="card-header">
          <h3>数据上传</h3>
        </div>
      </template>
      
      <div class="upload-container">
        <el-upload
          class="upload-component"
          action="#"
          :http-request="uploadFile"
          :show-file-list="false"
          :before-upload="beforeUpload"
          drag
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽文件到这里或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持Excel、CSV格式的数据文件，用于更新平台数据分析
            </div>
          </template>
        </el-upload>
        
        <div v-if="uploadStatus" class="upload-status">
          <el-alert
            :title="uploadStatus.title"
            :type="uploadStatus.type"
            :description="uploadStatus.description"
            show-icon
            :closable="false"
          />
        </div>
      </div>
    </el-card>
    
    <!-- 数据预览 -->
    <el-card shadow="hover" class="preview-card">
      <template #header>
        <div class="card-header">
          <h3>数据预览</h3>
        </div>
      </template>
      
      <div class="preview-content">
        <router-view name="adminAnalytics"></router-view>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { uploadAnalyticsData } from '@/api/admin'
import { UploadFilled } from '@element-plus/icons-vue'

const router = useRouter()
const uploadStatus = ref(null)

const beforeUpload = (file) => {
  // 检查文件类型
  const allowedTypes = [
    'application/vnd.ms-excel', 
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 
    'text/csv'
  ]
  const isValidType = allowedTypes.includes(file.type)
  
  if (!isValidType) {
    ElMessage.error('只支持Excel或CSV格式的文件')
    return false
  }
  
  // 检查文件大小 (小于10MB)
  const isLessThan10M = file.size / 1024 / 1024 < 10
  
  if (!isLessThan10M) {
    ElMessage.error('文件大小不能超过10MB')
    return false
  }
  
  return true
}

const uploadFile = async (options) => {
  const { file } = options
  uploadStatus.value = {
    title: '上传中...',
    type: 'info',
    description: '正在上传并处理数据文件，请稍候...'
  }
  
  const formData = new FormData()
  formData.append('file', file)
  
  try {
    const response = await uploadAnalyticsData(formData)
    
    if (response && response.data) {
      uploadStatus.value = {
        title: '上传成功',
        type: 'success',
        description: `文件 ${response.data.fileName} 已成功上传并处理。${response.data.message}`
      }
      
      ElMessage.success('数据文件上传成功')
    } else {
      throw new Error('上传响应格式不正确')
    }
  } catch (error) {
    console.error('上传数据文件失败:', error)
    
    uploadStatus.value = {
      title: '上传失败',
      type: 'error',
      description: error.message || '上传数据文件失败，请稍后再试'
    }
    
    ElMessage.error('上传数据文件失败')
  }
}

const navigateToAnalytics = () => {
  router.push('/admin/analytics')
}
</script>

<style scoped>
.analytics-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.upload-card {
  margin-bottom: 20px;
}

.upload-container {
  padding: 20px;
}

.upload-component {
  width: 100%;
}

.upload-status {
  margin-top: 20px;
}

.preview-card {
  margin-bottom: 20px;
}

.preview-container {
  height: 500px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.preview-content {
  padding: 20px;
  min-height: 500px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>